
<template>
  <el-dialog v-model="showUpload" width="20%" :destroy-on-close="true"
  @close="showUpload = false"
  >
    <el-upload
   class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
      :headers="{Authorization: 'Bearer '+token}"
      :before-upload="beforeAvatarUpload" ref='uploadRef'

    drag
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>

    <div class="el-upload__text">
     拖入文件上传或<em>点击上传</em>
    </div>
      <div class="el-upload__tip">
        jpg/png 格式最大为1M
      </div>
    </el-upload>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
  uploadUrl: {
    type: String,
    required: true
  },
  token:{
  type: String,
  required: true
  },

})

const emit = defineEmits(['uploadSuccess'])
let uploadUrl = computed(() => props.uploadUrl)
const showUpload = ref(false)

let uploadRef = ref()

const handleAvatarSuccess = (
  response: any,
  uploadFile: any,
) => {
  emit('uploadSuccess')
}

const beforeAvatarUpload = (rawFile: any) => {
  console.log(rawFile.type);

  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' ) {
    ElMessage.error('只支持jpg/png!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像超过2M!')
    return false
  }
  return true
}

defineExpose({
  showUpload
})


</script>

<style>
.avatar-uploader{
     display: flex;
    align-items: center;
    flex-direction: column;
}
.el-upload-dragger{
    width: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}


.el-icon--upload{
  font-size: 4em;
  margin-bottom: 20px;
}
。el-upload__text{
  margin-top: 10px;
}
</style>
